<template>
  <div class="main gap16 flex-column">
    <div class="top bg-white">
      <div class="bold mgb10">故障服务概览</div>
      <div class="gap30 flex-row-center-between">
        <TopOverviewMonth :data="state.data.faultServiceVO" />
        <TopOverviewAll :data="state.data.faultServiceVO" />
      </div>
    </div>

    <div class="flex-column flex1 bg-white" style="height: calc(100% - 210px)">
      <div class="flex-row-center-left mgb10" style="height: 40px">
        <span class="bold mgr20">当月故障修复排名</span>
        <div>
          <SelectVue
            v-model="state.sort"
            :option-list="[
              { name: '按当月修复数-倒序', id: 'count-desc' },
              { name: '按当月修复数-升序', id: 'count-asc' },
              { name: '按当月修复率-倒序', id: 'rate-desc' },
              { name: '按当月修复率-升序', id: 'rate-asc' }
            ]"
            :clearable="false"
            style="width: 200px"
            @change="onSortChange"
          />
        </div>
      </div>
      <div v-if="state.data.faultRepairTopVOList.length" class="flex1" style="overflow: auto; overflow-x: hidden">
        <TransitionGroup name="list">
          <FaultRepairItem v-for="(item, index) in state.data.faultRepairTopVOList" :index="index + 1" :key="item.userId" class="mgb20" :data="item" />
        </TransitionGroup>
      </div>

      <empty v-else style="margin: auto" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import request from '@/service'
  import { Ui } from '@/utils'
  import { orderBy } from 'xe-utils'
  import TopOverviewMonth from './cpns/top-overview-month.vue'
  import TopOverviewAll from './cpns/top-overview-all.vue'
  import FaultRepairItem from './cpns/fault-repair-item.vue'
  import SelectVue from '@/components/select'
  import type { FaultData, FaultRepairTopVO, FaultServiceVO } from './config'
  import empty from '@/components/empty/empty.vue'

  const state = reactive({
    sort: 'count-desc',
    data: {
      faultRepairTopVOList: [] as FaultRepairTopVO[],
      faultServiceVO: {} as FaultServiceVO
    }
  })

  /**----------------------------methods----------------------------------------------------------------------- */

  type SortType = 'count-desc' | 'count-asc' | 'rate-desc' | 'rate-asc'
  /**
   * 排序
   * @param v
   */
  const onSortChange = (v: SortType) => {
    const [field, type] = v.split('-')

    const sortByCount = (item: FaultRepairTopVO) => Number(Object.values(item.monthRepairFault)[0])
    const sortByRate = (item: FaultRepairTopVO) => Number(item.monthRate.replace('%', ''))

    state.data.faultRepairTopVOList = orderBy(state.data.faultRepairTopVOList, [[field === 'count' ? sortByCount : sortByRate, type]])
  }

  const query = () => {
    request.get<FaultData>('/fault/getFaultService').then(res => {
      if (res.code !== 0) return Ui.useMessage('error', res.msg)
      state.data = res.data
    })
  }

  /**----------------------------lifecycle----------------------------------------------------------------------- */
  query()
</script>

<style scoped lang="less">
  .main {
    background: #f2f6fc !important;
    padding: 0;
    .bg-white {
      padding: 10px;
      background: #fff;
    }
    // .top {
    //   flex-shrink: 0;
    //   height: 170px;
    // }

    .list-move,
    .list-enter-active,
    .list-leave-active {
      transition: all 0.5s ease;
    }

    .list-enter-from,
    .list-leave-to {
      opacity: 0;
      transform: translateX(30px);
    }

    /* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
    .list-leave-active {
      position: absolute;
    }
  }
</style>
